<template>
  <div class="dashboard">
    <div class="head">
      <span>Sail</span>
      <div style="flex:1;"></div>
      <SButton @click="onClickNewProject" :disabled="working">新建</SButton>
    </div>
    <div class="project">
      <div class="project-item" v-for="(item, index) in list"
           :key="index"
           @click.stop="onClickOpenProject(item)"
      >
        <span>{{ item.name }}</span>
        <div style="flex:1;"></div>
        <SButton class="el-icon-folder" @click.stop="onClickShowProjectDir(item)">打开项目</SButton>
        <SButton class="el-icon-delete" @click="onClickDeleteProject(item)">删除项目</SButton>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import { useRouter } from 'vue-router';
import { generate } from 'shortid';
import SButton from '@/ui-kit/button/button.vue';
import { ProjectList } from './store/tyeps';
import dashboardStore from './store';

export default defineComponent({
  name: 'Home',
  components: { SButton },
  setup() {

    const router = useRouter();

    const list = computed(() => {
      return dashboardStore().lists;
    });
    const working = ref(false);

    function openProject(data: ProjectList) {
      router.push({
        name: 'editor',
        query: {
          projectID: data.id,
        },
      });
    }

    return {
      working,
      list,
      onClickNewProject() {
        dashboardStore().setValue(generate());
      },
      // eslint-disable-next-line no-undef
      onClickShowProjectDir(item: ProjectList): void {
        openProject(item);
      },
      onClickOpenProject(item: ProjectList) {
        openProject(item);
      },
      onClickDeleteProject(item: any): void {
        console.log(item);
      },
    };
  },
});
</script>
<style scoped lang="scss">
.dashboard {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .head {
    display: flex;
    flex-direction: row;
    padding: 4px 5px;
    border-bottom: #2a2a2a 1px solid;
  }

  .project {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;

    .project:first-child {
      margin-top: 0;
    }

    .project:last-child {
      margin-bottom: 0;
    }

    .project-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      border: #2a2a2a 1px solid;
      border-radius: 3px;
      cursor: pointer;
      padding: 0 10px;
      margin: 10px;
      min-height: 40px;

      span {
        user-select: none;
      }
    }
  }
}
</style>
